<template>
  <div class="c-martin__font">
    <ul class="c-martin__font__ul">
      <li class="c-martin__font__li" :data-text="font.font" v-for="(font, index) in fontList" :key="index">
        <martin-font :class="font.className"/>
        <p class="iconfont__name">{{font.font}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import FontSub from '@/package/Font/src/Font'

export default {
  name: 'MartinFontContain',
  components: {
    'martin-font': FontSub
  },
  data() {
    return {
      fontList: [
        {
          font: '&#xe6e5;',
          className: 'mr-icon-info'
        },
        {
          font: '&#xe733;',
          className: 'mr-icon-time'
        },
        {
          font: '&#xe60f;',
          className: 'mr-icon-search'
        },
        {
          font: '&#xe6a3;',
          className: 'mr-icon-down'
        },
        {
          font: '&#xe9cb;',
          className: 'mr-icon-android'
        },
        {
          font: '&#xeb0e;',
          className: 'mr-icon-loading'
        },
        {
          font: '&#xe6ed;',
          className: 'mr-icon-top'
        },
        {
          font: '&#xe610;',
          className: 'mr-icon-question'
        },
        {
          font: '&#xe751;',
          className: 'mr-icon-close'
        },
        {
          font: '&#xe676;',
          className: 'mr-icon-ios'
        },
        {
          font: '&#xe744;',
          className: 'mr-icon-arrow-bottom'
        },
        {
          font: '&#xe602;',
          className: 'mr-icon-arrow--bottom'
        },
        {
          font: '&#xe600;',
          className: 'mr-icon-arrow--left'
        },
        {
          font: '&#xe601;',
          className: 'mr-icon-arrow--right'
        },
        {
          font: '&#xe60a;',
          className: 'mr-icon-arrow--top'
        }
      ]
    }
  },
  mounted() {
    this.$util.copy()
  }
}
</script>

<style scoped>

</style>
